<template>
  <div>
    <el-card>
      <template #header> 数据折线图 </template>
      <Echarts id="tempHum" height="500px" :full-options="testOptions" :loading="false"></Echarts>
    </el-card>
  </div>
</template>
<script setup lang="ts">
import Echarts from '@/components/Echarts/Echarts.vue';
import testOption from '@/components/Echarts/options';

const testOptions = reactive({
  options: {
    title: {
      text: 'DIN 4150-3',
      x:'center',
    },
    xAxis: {
      type: 'value',
      min: 0,
      max: 100,
      name: 'Frequency(Hz)',
      nameTextStyle: {  // y轴name的样式调整
        color: '#000',
        fontSize: 22,
        padding: [0, 0, 0, 0] // 加上padding可以调整其位置
      },
      nameLocation: "middle", // y轴name处于y轴的什么位置
      splitNumber:10,
    },
    yAxis: {
      type: 'value',
      min: 0,
      max: 60,
      name: 'Velocity(mm/sec)',
      nameTextStyle: { // x轴name的样式调整
        color: '#000',
        fontSize: 22,
        padding: [0, 0, 0, 0, 0]  // 加上padding可以调整其位置
      },
      nameGap: 40,  // 通过你生成的图表来调整
      nameLocation: "middle", // x轴name处于x轴的什么位置
    },
    legend: {
      data: ['Radial', 'Transverse', 'Vertical'],
      left: 'center',
      bottom: 0
    },
    series: [
      {
        name: 'Radial',
        type: 'scatter',
        data: [
          [3.1, 0.381],
          [1.6, 0.191],
          [6.7, 0.762],
          [11.3, 1.461],
          [2.4, 0.445],
          [2.6, 0.635],
          [3.9, 0.508],
        ],
        itemStyle: {
          color: 'blue'
        }
      },
      {
        name: 'Transverse',
        type: 'scatter',
        data: [
          [2.3, 0.254],
          [2.6, 0.191],
          [3.1, 0.381],
          [2.3, 0.254],
          [2.5, 0.254],
          [2.5, 0.445],
          [2.3, 0.254],
        ],
        itemStyle: {
          color: 'red'
        }
      },
      {
        name: 'Vertical',
        type: 'scatter',
        data: [
          [4.9, 1.524],
          [2.7, 0.445],
          [3.8, 2.667],
          [5.2, 2.286],
          [2.5, 1.143],
          [3.3, 2.096],
          [3.0, 1.461],
        ],
        itemStyle: {
          color: 'black'
        }
      },
      {
        name: 'Radial',
        type: 'line',
        color: 'blue',
        data: [
          [0, 3],
          [10, 3],
          [20, 4],
          [30, 5],
          [40, 6],
          [50, 7],
          [60, 8],
          [70, 9.1],
          [80, 9.4],
          [90, 9.7],
          [100, 10],
        ],
        smooth: true,
        showSymbol: false
      },
      {
        name: 'Transverse',
        type: 'line',
        data: [
          [0, 5],
          [10, 5],
          [20, 8],
          [30, 10],
          [40, 12],
          [50, 15],
          [60, 16],
          [70, 17],
          [80, 18],
          [90, 19],
          [100, 20],
        ],
        color: 'red',
        smooth: true,
        showSymbol: false
      },
      {
        name: 'Vertical',
        type: 'line',
        data: [
          [0, 20],
          [10, 20],
          [20, 25],
          [30, 30],
          [40, 35],
          [50, 40],
          [60, 42],
          [70, 44],
          [80, 46],
          [90, 48],
          [100, 50],
        ],
        color: 'black',
        // smooth: true,
        showSymbol: false
      }
    ]
  },
  init: true
})

</script>
